import { useEffect, useRef, useCallback } from 'react'
import remoteLoad from '../../utils/remoteLoad'
const Map = () => {
  const MapContainer: any = useRef(null)
  // 初始化加载画图
  useEffect(() => {
    remoteLoad(`https://webapi.amap.com/maps?v=1.4.0&key=f812bfe32bf19dd61599b3aff2bfe1a4`).then(res => {
      const map = new window.AMap.Map('container', {
        center: [121.045332, 31.19884],
        zoom: 11,
      })
      map.setFitView()
      MapContainer.current = map
    })
  }, [])
  const drawArea = useCallback(
    (data: string) => {
      if (MapContainer.current) {
        let polygon = new window.AMap.Polygon({
          path: data,
          fillColor: '#ccebc5',
          strokeOpacity: 1,
          fillOpacity: 0.5,
          strokeColor: '#2b8cbe',
          strokeWeight: 1,
          strokeStyle: 'dashed',
          strokeDasharray: [5, 5],
        })
        polygon.on('mouseover', () => {
          polygon.setOptions({
            fillOpacity: 0.7,
            fillColor: '#7bccc4',
          })
        })
        polygon.on('mouseout', () => {
          polygon.setOptions({
            fillOpacity: 0.5,
            fillColor: '#ccebc5',
          })
        })
        MapContainer?.current?.add(polygon)
      }
    },
    [MapContainer]
  )
  return (
    <>
      <div
        onClick={() => {
          drawArea('shanghai')
        }}
      >
        画区域
      </div>
      <div id='container' style={{ width: '100%', height: '80vh' }}></div>
    </>
  )
}
export default Map
